<template><div><h2 id="分步表单" tabindex="-1"><a class="header-anchor" href="#分步表单"><span>分步表单</span></a></h2>
<h2 id="安装" tabindex="-1"><a class="header-anchor" href="#安装"><span>安装</span></a></h2>
<p>前往<a href="https://github.com/dcat-admin/form-step" target="_blank" rel="noopener noreferrer">github.com/dcat-admin/form-step</a>下载分步表单扩展，然后安装并启用。</p>
<blockquote>
<p>扩展安装请参考文档<a href="https://learnku.com/docs/dcat-admin/2.x/extended-basic-usage/9691" target="_blank" rel="noopener noreferrer">扩展基本使用</a>章节。</p>
</blockquote>
<h2 id="简单示例" tabindex="-1"><a class="header-anchor" href="#简单示例"><span>简单示例</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Form</span> <span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'分步表单'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">action</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'step'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">disableListButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">remember</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 记住表单步骤，默认不开启</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'950px'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'基本信息'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$step</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token variable">$info</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'&lt;i class="fa fa-exclamation-circle">&lt;/i> 表单字段支持前端验证和后端验证混用，前端验证支持H5表单验证以及自定义验证。'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">html</span><span class="token punctuation">(</span><span class="token class-name static-context">Alert</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$info</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">info</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'姓名'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">maxLength</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token comment">// h5 表单验证</span></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'age'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'年龄'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'number'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">attribute</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'max'</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">help</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'前端验证'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">radio</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'sex'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'性别'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'未知'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'男'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'女'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">default</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token comment">// 后端验证</span></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'birthplace'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'籍贯'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'required'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">help</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'演示后端字段验证'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'homepage'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'个人主页'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">textarea</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'description'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'简介'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'兴趣爱好'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$step</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">tags</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'hobbies'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'爱好'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'唱'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'跳'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'RAP'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'踢足球'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'books'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'书籍'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'music'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'音乐'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token comment">// 事件</span></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">shown</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token keyword">return</span> <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">    Dcat<span class="token operator">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'兴趣爱好'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'兴趣爱好'</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token constant">JS</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'地址'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$step</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'address'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'街道地址'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'post_code'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'邮政编码'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">tel</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tel'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">' 联系电话'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token variable">$resource</span> <span class="token operator">=</span> <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">getResource</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token variable">$data</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">                    <span class="token string single-quoted-string">'title'</span>       <span class="token operator">=></span> <span class="token string single-quoted-string">'操作成功'</span><span class="token punctuation">,</span></span>
<span class="line">                    <span class="token string single-quoted-string">'description'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'恭喜您成为第10086位用户'</span><span class="token punctuation">,</span></span>
<span class="line">                    <span class="token string single-quoted-string">'createUrl'</span>   <span class="token operator">=></span> <span class="token variable">$resource</span><span class="token punctuation">,</span></span>
<span class="line">                    <span class="token string single-quoted-string">'backUrl'</span>     <span class="token operator">=></span> <span class="token variable">$resource</span><span class="token punctuation">,</span></span>
<span class="line">                <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin::form.done-step'</span><span class="token punctuation">,</span> <span class="token variable">$data</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果</p>
<p><a href="https://learnku.com/docs/dcat-admin/2.x/step-by-step-form/%7B%7Bpublic%7D%7D/assets/img/screenshots/step-form-1.png" target="_blank" rel="noopener noreferrer"><img src="https://learnku.com/docs/dcat-admin/2.x/step-by-step-form/{{public}}/assets/img/screenshots/step-form-1.png" alt="step-form-1.png"></a></p>
<h2 id="运行逻辑" tabindex="-1"><a class="header-anchor" href="#运行逻辑"><span>运行逻辑</span></a></h2>
<p>分步表单的使用很简单，运行逻辑也与普通表单没有太大区别，下面简单说说分步表单的运行逻辑。</p>
<blockquote>
<p>{tip} 分步表单没有 <code v-pre>update</code> 的概念。</p>
</blockquote>
<h4 id="参数验证" tabindex="-1"><a class="header-anchor" href="#参数验证"><span>参数验证</span></a></h4>
<p>当用户点击 <code v-pre>下一步</code> 时，会向后端发起请求验证参数是否正确，如果参数不符合要求则显示错误信息，验证通过才会进入下一个步骤。</p>
<h4 id="表单提交" tabindex="-1"><a class="header-anchor" href="#表单提交"><span>表单提交</span></a></h4>
<p>当进行到最后一步时，会对所有步骤的表单参数一起提交到后端并进行验证，如果参数不符合要求则显示错误信息，验证通过则保存表单数据，保存的方法与普通表单完全一致。</p>
<blockquote>
<p>{tip} 最后保存表单的方法是 <code v-pre>Form::store</code>。</p>
</blockquote>
<h4 id="完成页面" tabindex="-1"><a class="header-anchor" href="#完成页面"><span>完成页面</span></a></h4>
<p>表单保存完成之后会显示完成页面，此步骤无法忽略。</p>
<h2 id="编辑表单" tabindex="-1"><a class="header-anchor" href="#编辑表单"><span>编辑表单</span></a></h2>
<p>分步表单默认是没有编辑功能的，用户输入了长步骤的表单之后不需要再分步编辑，因此如果需要对分步表单进行编辑，可以参考以下方式</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">MyRepository</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Form</span> <span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 判断是否是编辑页面</span></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">isEditing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'age'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'年龄'</span><span class="token punctuation">)</span></span>
<span class="line">                 <span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">                 <span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'number'</span><span class="token punctuation">)</span></span>
<span class="line">                 <span class="token operator">-></span><span class="token function">attribute</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'max'</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">)</span></span>
<span class="line">                 <span class="token operator">-></span><span class="token function">help</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'前端验证'</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">            <span class="token operator">...</span></span>
<span class="line"></span>
<span class="line">            <span class="token keyword">return</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">remember</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'950px'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'基本信息'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Form<span class="token punctuation">\</span>StepForm</span> <span class="token variable">$step</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token variable">$info</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'&lt;i class="fa fa-exclamation-circle">&lt;/i> 表单字段支持前端验证和后端验证混用，前端验证支持H5表单验证以及自定义验证。'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">html</span><span class="token punctuation">(</span><span class="token class-name static-context">Alert</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$info</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">info</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'姓名'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">maxLength</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token comment">// h5 表单验证</span></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'age'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'年龄'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'number'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">attribute</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'max'</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">help</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'前端验证'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">radio</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'sex'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'性别'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'未知'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'男'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'女'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">default</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token operator">...</span></span>
<span class="line"></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'兴趣爱好'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Form<span class="token punctuation">\</span>StepForm</span> <span class="token variable">$step</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token operator">...</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token operator">...</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="功能接口" tabindex="-1"><a class="header-anchor" href="#功能接口"><span>功能接口</span></a></h2>
<h3 id="设置容器最大宽度" tabindex="-1"><a class="header-anchor" href="#设置容器最大宽度"><span>设置容器最大宽度</span></a></h3>
<p>默认 <code v-pre>1000px</code>。</p>
<blockquote>
<p>{tip} 此方法只针对大屏幕，手机端页面会自动调节大小。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'900px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="记住表单数据" tabindex="-1"><a class="header-anchor" href="#记住表单数据"><span>记住表单数据</span></a></h3>
<p>开启此功能之后，当用户点击 <code v-pre>下一步</code> 按钮并且参数验证通过后，会把表单数据保存在 <code v-pre>session</code> 中，直到整个分步表单保存完毕之后才会销毁。</p>
<blockquote>
<p>{tip} 此功能默认不开启。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 开启</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">remember</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 关闭</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">remember</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置容器间距" tabindex="-1"><a class="header-anchor" href="#设置容器间距"><span>设置容器间距</span></a></h3>
<p>默认值 <code v-pre>30px 18px 30px</code>。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">padding</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'30px 18px 30px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="监听页面离开事件" tabindex="-1"><a class="header-anchor" href="#监听页面离开事件"><span>监听页面离开事件</span></a></h3>
<p>监听所有步骤表单页面离开事件，可添加多个。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">leaving</span><span class="token punctuation">(</span><span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">     <span class="token comment">// 获取当前页面的步骤索引</span></span>
<span class="line">     <span class="token keyword">var</span> index <span class="token operator">=</span> args<span class="token operator">.</span>index<span class="token punctuation">;</span> </span>
<span class="line"></span>
<span class="line">     Dcat<span class="token operator">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"你将要离开第 "</span> <span class="token operator">+</span> <span class="token punctuation">(</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string double-quoted-string">" 个页面"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">     <span class="token comment">// args变量是一个js对象，包含当前事件对象、当前步骤选项、表单对象和表单值等字段。</span></span>
<span class="line">     console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"leaving"</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">     <span class="token comment">// 获取当前事件对象</span></span>
<span class="line">     <span class="token keyword">var</span> evt <span class="token operator">=</span> args<span class="token operator">.</span>event<span class="token punctuation">;</span></span>
<span class="line">     <span class="token comment">// 获取步骤表单标题tap对象</span></span>
<span class="line">     <span class="token keyword">var</span> tab <span class="token operator">=</span> args<span class="token operator">.</span>tab<span class="token punctuation">;</span></span>
<span class="line">     <span class="token comment">// 获取动向是前往上一步还是下一步页面："forward"、"backward"</span></span>
<span class="line">     <span class="token keyword">var</span> direction <span class="token operator">=</span> args<span class="token operator">.</span>direction<span class="token punctuation">;</span></span>
<span class="line">     <span class="token comment">// 获取当前步骤的表单JQ对象</span></span>
<span class="line">     <span class="token keyword">var</span> <span class="token variable">$form</span> <span class="token operator">=</span> args<span class="token operator">.</span>form<span class="token punctuation">;</span></span>
<span class="line">     <span class="token comment">// 获取当前步骤页的表单值</span></span>
<span class="line">     <span class="token keyword">var</span> formArray <span class="token operator">=</span> args<span class="token operator">.</span>formArray<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">     <span class="token comment">// 获取指定步骤的表单JQ对象</span></span>
<span class="line">     <span class="token keyword">var</span> <span class="token variable">$firstForm</span> <span class="token operator">=</span> args<span class="token operator">.</span><span class="token function">getForm</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">     <span class="token comment">// 获取指定步骤的表单值</span></span>
<span class="line">     <span class="token keyword">var</span> firstFormArray <span class="token operator">=</span> args<span class="token operator">.</span><span class="token function">getFormArray</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">     <span class="token comment">// 停止离开当前页面</span></span>
<span class="line">     <span class="token keyword">return</span> <span class="token constant boolean">false</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token constant">JS</span>    </span>
<span class="line"><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">leaving</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="监听页面显示事件" tabindex="-1"><a class="header-anchor" href="#监听页面显示事件"><span>监听页面显示事件</span></a></h3>
<p>监听所有步骤表单页面显示事件，可添加多个。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">shown</span><span class="token punctuation">(</span><span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">     <span class="token comment">// 获取当前页面的步骤索引</span></span>
<span class="line">     <span class="token keyword">var</span> index <span class="token operator">=</span> args<span class="token operator">.</span>index<span class="token punctuation">;</span> </span>
<span class="line"></span>
<span class="line">     Dcat<span class="token operator">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"当前显示的是第 "</span> <span class="token operator">+</span> <span class="token punctuation">(</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string double-quoted-string">" 个页面"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">     <span class="token comment">// args变量的值与“leaving”事件的值相同。</span></span>
<span class="line">     console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"shown"</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token constant">JS</span>    </span>
<span class="line"><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">shown</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="增加步骤表单" tabindex="-1"><a class="header-anchor" href="#增加步骤表单"><span>增加步骤表单</span></a></h3>
<p>步骤表单支持所有表单字段。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Form</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'标题'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Form<span class="token punctuation">\</span>StepForm</span> <span class="token variable">$step</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'username'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'required'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="监听步骤页面离开事件" tabindex="-1"><a class="header-anchor" href="#监听步骤页面离开事件"><span>监听步骤页面离开事件</span></a></h4>
<p>监听当前步骤页面离开事件，支持监听多次。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Form</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'基本信息'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Form<span class="token punctuation">\</span>StepForm</span> <span class="token variable">$step</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">leaving</span><span class="token punctuation">(</span><span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line"></span>
<span class="line">    Dcat<span class="token operator">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"你将要离开 基本信息 页面"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// args变量是一个js对象，包含当前事件对象、当前步骤选项、表单对象和表单值等字段。</span></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"离开 基本信息"</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 获取当前事件对象</span></span>
<span class="line">    <span class="token keyword">var</span> evt <span class="token operator">=</span> args<span class="token operator">.</span>event<span class="token punctuation">;</span></span>
<span class="line">    <span class="token comment">// 获取当前页面的步骤索引</span></span>
<span class="line">    <span class="token keyword">var</span> index <span class="token operator">=</span> args<span class="token operator">.</span>index<span class="token punctuation">;</span></span>
<span class="line">    <span class="token comment">// 获取步骤表单标题tap对象</span></span>
<span class="line">    <span class="token keyword">var</span> tab <span class="token operator">=</span> args<span class="token operator">.</span>tab<span class="token punctuation">;</span></span>
<span class="line">    <span class="token comment">// 获取动向是前往上一步还是下一步页面："forward"、"backward"</span></span>
<span class="line">    <span class="token keyword">var</span> direction <span class="token operator">=</span> args<span class="token operator">.</span>direction<span class="token punctuation">;</span></span>
<span class="line">    <span class="token comment">// 获取当前步骤的表单JQ对象</span></span>
<span class="line">    <span class="token keyword">var</span> <span class="token variable">$form</span> <span class="token operator">=</span> args<span class="token operator">.</span>form<span class="token punctuation">;</span></span>
<span class="line">    <span class="token comment">// 获取当前步骤页的表单值</span></span>
<span class="line">    <span class="token keyword">var</span> formArray <span class="token operator">=</span> args<span class="token operator">.</span>formArray<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 获取指定步骤的表单JQ对象</span></span>
<span class="line">    <span class="token keyword">var</span> <span class="token variable">$firstForm</span> <span class="token operator">=</span> args<span class="token operator">.</span><span class="token function">getForm</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token comment">// 获取指定步骤的表单值</span></span>
<span class="line">    <span class="token keyword">var</span> firstFormArray <span class="token operator">=</span> args<span class="token operator">.</span><span class="token function">getFormArray</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 停止离开当前页面</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token constant boolean">false</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token constant">JS</span>    </span>
<span class="line">    <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 监听多次</span></span>
<span class="line">    <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">leaving</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="监听步骤页面显示事件" tabindex="-1"><a class="header-anchor" href="#监听步骤页面显示事件"><span>监听步骤页面显示事件</span></a></h4>
<p>监听当前步骤页面显示事件，支持监听多次。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Form</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'基本信息'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Form<span class="token punctuation">\</span>StepForm</span> <span class="token variable">$step</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">shown</span><span class="token punctuation">(</span><span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line"></span>
<span class="line">    Dcat<span class="token operator">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"当前步骤是 基本信息"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// args变量的值与“leaving”事件的值相同。</span></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"显示 基本信息"</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token constant">JS</span>    </span>
<span class="line">    <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 监听多次</span></span>
<span class="line">    <span class="token variable">$step</span><span class="token operator">-></span><span class="token function">shown</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置完成页面" tabindex="-1"><a class="header-anchor" href="#设置完成页面"><span>设置完成页面</span></a></h3>
<p>当所有步骤都完成之后会显示完成页面，系统提供一个默认的完成页面，开发者也可以通过以下方法自定义完成页面要显示的内容。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Form</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSteps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Form<span class="token punctuation">\</span>DoneStep</span> <span class="token variable">$done</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 获取新增ID</span></span>
<span class="line">    <span class="token comment">// 由 Repository::store 返回的值</span></span>
<span class="line">    <span class="token variable">$newId</span> <span class="token operator">=</span> <span class="token variable">$done</span><span class="token operator">-></span><span class="token function">getNewId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 返回你要显示的内容，可以使一个视图也可以是一个字符串。</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


